import { useState } from "react";
import { Routes, Route, Navigate, BrowserRouter } from "react-router-dom";
import React, { useEffect } from "react";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Index from "./pages/index";
import AuthComponent from "./components/AuthComponent";

const Home = React.lazy(() => import("./pages/Home/Home"));
const Detail = React.lazy(() => import("./pages/Detail/Detail"));
const Experiment = React.lazy(() => import("./pages/Experiment/Experiment"));
const Mine = React.lazy(() => import("./pages/Mine"));
const NotFound = React.lazy(() => import("./pages/NotFound"));

function App() {
  return (
    <React.Suspense fallback={<div>加载</div>}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Navigate to={"/login"}></Navigate>} />
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route
            path="/nav"
            element={
              <AuthComponent>
                <Index />
              </AuthComponent>
            }
          >
            <Route path="/nav" element={<Navigate to={"/nav/home"}></Navigate>} />
            <Route path="home" element={<Home />} />
            <Route path="detail" element={<Detail />} />
            <Route path="experiment" element={<Experiment />} />
            <Route path="mine" element={<Mine />} />
          </Route>
          <Route path="*" element={<NotFound />} />
        </Routes>
      </BrowserRouter>
    </React.Suspense>
  );
}

export default App;
